<template>
  <div>
    <a-card :bordered="false">
      <a-form :form="form">
        <a-form-item v-show="false"><a-input v-decorator="['id']"/></a-form-item>
        <div class="divider-content-only divider-content-center-only">
          <a-divider type="vertical" class="divider-only"/>计算费用时月天数
        </div>
        <a-form-item
          label="配置"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          >
              <a-radio-group placeholder="请选择计算费用时月天数" v-decorator="['calculateStyle',{rules: [{ required: true, message: '请选择计算费用时月天数！' }]}]">
                <a-radio :style="radioStyle" key="0" :value="0">按固定30天算</a-radio>
                <span class="span-calculateStyle">
                  2.26~3.5，住8天，月租金3000，8/30*3000=800<br>5.26~6.5，住11天，月租金3000，11/30*3000=1100
                 </span>
                <a-radio :style="radioStyle" key="1" :value="1">按月份实际天数</a-radio>
                <span class="span-calculateStyle">
                  2.26~3.5，住8天，月租金3000，8/28*3000=857.14<br>5.26~6.5，住11天，月租金3000，11/31*3000=1064.52
                 </span>
              </a-radio-group>
        </a-form-item>
        <a-divider/>
        <div class="divider-content-only divider-content-center-only">
              <a-divider type="vertical" class="divider-only"/>
              账单金额取整
            </div>
            <a-form-item
              label="配置"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-radio-group placeholder="请选择账单金额取整" v-decorator="['amount',{rules: [{ required: true, message: '请选择账单金额取整！' }]}]" >
                <a-radio :style="radioStyle" key="0" :value="0">关闭</a-radio>
                <a-radio :style="radioStyle" key="1" :value="1">打开 小数点后四舍五入</a-radio>
                <span class="span-calculateStyle">
                  100.2元，算100元<br>
                  100.8元，算101元
                 </span>
              </a-radio-group>
            </a-form-item>
            <a-divider/>
            <div class="divider-content-only divider-content-center-only">
              <a-divider type="vertical" class="divider-only"/>
              租约设置账单收租日
            </div>
            <a-form-item
              label="账单起始日"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-radio-group placeholder="请选择账单起始日"  @change="onBillStartTypeChange" v-decorator="['billStartType']" >
                 <a-radio :style="radioStyle" key="0" :value="0">起租日<span class="span-calculateStyle">---起租日是几号账单起始日就是几号</span></a-radio>
                 <a-radio :style="radioStyle" key="1" :value="1">固定日期</a-radio>
                 <div>
                  <a-form-item>
                    <a-select :disabled="billStartDataable" style="width: 100%" placeholder="请选择固定日期" v-decorator="['billStartData']">
                      <a-select-option v-for="(item,index) in billStartDataData" :key="index" :value="item">{{ item }}号</a-select-option>
                    </a-select>
                  </a-form-item>
                </div>
              </a-radio-group>
            </a-form-item>
            <a-form-item
              label="收租日"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-radio-group placeholder="请选择收租日" @change="onBillEndTypeChange" v-decorator="['billEndType']">
                <a-radio :style="radioStyle" :key="0" :value="0">提前</a-radio>
                <div>
                  <a-form-item label="">
                    <a-input-number
                    :min="1"
                    :max="365"
                    :disabled="billEndTqDataable"
                    style="width:100%"
                    placeholder="请输入账单收租日提前几日"
                    v-decorator="['billEndTqData']"/>
                    相较账单起始日提前几天
                  </a-form-item>
                </div>
                <a-radio :style="radioStyle" :key="1" :value="1">固定</a-radio>
                <div  style="width: 100%">
                  <a-form-item  label="">
                    <a-select :disabled="billEndGdmonthDataDataable"  placeholder="请选择账单收租日固定几月" style="width: 100%" v-decorator="['billEndGdmonthData']">
                      <a-select-option  style="width: 100%"  v-for="(item,index) in billEndGdmonthDataData" :key="index" :value="item.code">{{ item.name }}</a-select-option>
                    </a-select>
                  </a-form-item>
                  <a-form-item >
                    <a-select :disabled="billEndGdmonthDataDataable"   placeholder="请选择账单收租日固定几日" style="width: 100%" v-decorator="['billEndGddayData']">
                      <a-select-option  style="width: 100%"  v-for="(item,index) in billEndGddayDataData" :key="index" :value="item">{{ item }}號</a-select-option>
                    </a-select>
                  </a-form-item>
                </div>
              </a-radio-group>
            </a-form-item>
            <a-divider/>
            <div class="divider-content-only divider-content-center-only">
              <a-divider type="vertical" class="divider-only"/>
              到期提醒设置
            </div>
            <a-form-item
              label="租客到期提醒提前"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-select style="width: 100%" placeholder="租客到期提醒提前" v-decorator="['zkdqtx', {rules: [{ required: true, message: '请选择租客到期提醒提前几日！' }]}]">
                <a-select-option v-for="item in 365" :key="item" :value="item">{{ item }}天</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item
              label="业主到期提醒提前"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-select style="width: 100%" placeholder="业主到期提醒提前" v-decorator="['yzdqtx', {rules: [{ required: true, message: '请选择业主到期提醒提前几日！' }]}]">
                <a-select-option v-for="item in 365" :key="item" :value="item">{{ item }}天</a-select-option>
              </a-select>
            </a-form-item>
            <a-divider />
            <div class="divider-content-only divider-content-center-only">
              <a-divider type="vertical" class="divider-only"/>
              賬單通用備注
            </div>
            <a-form-item
              label="備注"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              has-feedback
            >
              <a-textarea placeholder="示例：收款账户：招商银行前海支行 8888 8888 8888 888 管家电话：13800138000" v-decorator="['remark', {rules: [{ message: '请输入备注！'}]}]" />
            </a-form-item>
      </a-form>
    </a-card>
    <a-card>
      <a-button type="primary" @click="handleSubmit" :loading="loading" >
        提交保存
      </a-button>
    </a-card>
  </div>
</template>
<script>
  import { busBasicSettingsEdit, busBasicSettingsOne } from '@/api/modular/main/busbasicsettings/busBasicSettingsManage'
  export default {
    data () {
      return {
        loading: false,
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15 }
        },
        radioStyle: {
          display: 'block',
          height: '30px',
          lineHeight: '30px'
        },
        amountData: [],
        billStartDataData: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31 ],
        billEndTypeData: [],
        billEndGdmonthDataData: [ { 'code': 12, 'name': '提前12月' }, { 'code': 11, 'name': '提前11月' }, { 'code': 10, 'name': '提前10月' }, { 'code': 9, 'name': '提前9月' }, { 'code': 8, 'name': '提前8月' }, { 'code': 7, 'name': '提前7月' }, { 'code': 6, 'name': '提前6月' }, { 'code': 5, 'name': '提前5月' }, { 'code': 4, 'name': '提前4月' }, { 'code': 3, 'name': '提前3月' }, { 'code': 2, 'name': '提前2月' }, { 'code': 1, 'name': '提前1月' }, { 'code': 0, 'name': '当月' }, { 'code': -1, 'name': '延後1月' }, { 'code': -2, 'name': '延後2月' }, { 'code': -3, 'name': '延後3月' }, { 'code': -4, 'name': '延後4月' }, { 'code': -5, 'name': '延後5月' }, { 'code': -6, 'name': '延後6月' }, { 'code': -7, 'name': '延後7月' }, { 'code': -8, 'name': '延後8月' }, { 'code': -9, 'name': '延後9月' }, { 'code': -10, 'name': '延後10月' }, { 'code': -11, 'name': '延後11月' }, { 'code': -12, 'name': '延後12月' } ],
        billEndGddayDataData: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31 ],
        zkdqtxData: [],
        yzdqtxData: [],
        form: this.$form.createForm(this),
        billStartDataable: false,
        billEndGdmonthDataDataable: false,
        billEndTqDataable: false
      }
    },
    created () {
      this.getData()
    },
    methods: {
      getData () {
        busBasicSettingsOne().then((res) => {
          if (res.code === 200) {
            this.edit(res.data)
          } else {
            this.$message.error('查詢失敗')//  + res.message
          }
        })
      },
      onBillEndTypeChange (e) {
        if (e.target.value === 0) {
          this.billEndTqDataable = false
          this.billEndGdmonthDataDataable = true
        } else {
          this.billEndTqDataable = true
          this.billEndGdmonthDataDataable = false
        }
      },
      onBillEndChange (e) {
        if (e === 0) {
          this.billEndTqDataable = false
          this.billEndGdmonthDataDataable = true
        } else {
          this.billEndTqDataable = true
          this.billEndGdmonthDataDataable = false
        }
      },
     onBillStartTypeChange (e) {
        if (e.target.value === 0) {
          this.billStartDataable = true
        } else {
          this.billStartDataable = false
        }
     },
    onBillStartChange (e) {
        if (e === 0) {
          this.billStartDataable = true
        } else {
          this.billStartDataable = false
        }
     },
     edit (record) {
       this.onBillEndChange(record.billEndType)
       this.onBillStartChange(record.billStartType)
       this.form.setFieldsValue(
            {
              id: record.id,
              calculateStyle: record.calculateStyle,
              amount: record.amount,
              billStartType: record.billStartType,
              billStartData: record.billStartData,
              billEndType: record.billEndType,
              billEndTqData: record.billEndTqData,
              billEndGdmonthData: record.billEndGdmonthData,
              billEndGddayData: record.billEndGddayData,
              zkdqtx: record.zkdqtx,
              yzdqtx: record.yzdqtx,
              remark: record.remark
            }
      )
    },
    handleSubmit () {
        const { form: { validateFields } } = this
        validateFields((errors, values) => {
          if (!errors) {
            this.loading = true
            for (const key in values) {
              if (typeof (values[key]) === 'object') {
                values[key] = JSON.stringify(values[key])
              }
            }
            busBasicSettingsEdit(values).then((res) => {
              if (res.code === 200) {
                this.loading = false
                this.$message.success('編輯成功')
                this.getData()
              } else {
                this.loading = false
                this.$message.error('編輯失敗')//  + res.message
              }
            })
          }
        })
      }
    }
  }
</script>
<style lang="less">
  .table-operator {
    margin-bottom: 18px;
  }
  button {
    margin-right: 8px;
  }
  .divider-only{
    background-color: aqua;
    width: 5px;
    height: 1.9em;
  }
  .divider-content-only{
    font-size: 20px;
    margin-bottom: 10px;
  }
  .divider-content-center-only{
      margin-top: 10px;
  }
  .span-calculateStyle{
    font-size: 15px;
    margin-bottom: 20px;
  }
</style>
